<template >
    <div >
        <!-- 弹框组件sql导入 -->
        <wk_dialog :ref="alertConfig.sql" title="解析sql" @submit="sql_submit" dialog_content="{background:#F9F9F5;width:800px;height:650px;}">
            <div class="common_dialog">
                <h4>温馨提示：将数据库创建脚本复制到文本框，自动解析生成文档.</h4>
                <h5>示例sql</h5>
                <pre>
CREATE TABLE `test` (
  `name` varchar(255) DEFAULT NULL,
  `id` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `a` (`name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
                </pre>
                <div   class="markdown-content">
                    <textarea  v-model="sql"></textarea>
                </div>

            </div>
        </wk_dialog>
        <wk_dialog :ref="alertConfig.html" title="解析html" @submit="html_submit" dialog_content="{background:#F9F9F5;width:800px;height:600px;}">
            <div class="common_dialog">
                <h4>温馨提示：将html文本框，自动解析生成文档.</h4>
                <h5>示例html</h5>
                <pre>{{text_pre}}</pre>
                <div   class="markdown-content">
                    <textarea  v-model="markdown"></textarea>
                </div>

            </div>
        </wk_dialog>
        <!-- 弹框组件代码导入 -->
        <wk_dialog :ref="alertConfig.code" title="添加代码块" @submit="code_submit" dialog_content="{background:#F9F9F5;width:800px;height:600px;}">
            <div>
                <h4 class="editormd-code-toolbar">
                    <span>代码语言</span>
                    <select v-model="code_dialog_lang">
                        <option :value="item" v-for="item in lang_type">{{item}}</option>
                    </select>
                </h4>
                <div   class="markdown-content">
                    <div  ref="codeeditor"  class="codemirror" style="height:420px;border-radius:10px" ></div>
                </div>

            </div>
        </wk_dialog>
        <!-- 弹框组件超链接导入 -->
        <wk_dialog :ref="alertConfig.href" title="添加超链接" @submit="href_submit"  dialog_content="{background:#F9F9F5;width:380px;height:250px}">
            <div>

                <div   class="href_dialog_item">
                    <label>链接地址</label>
                    <input type="text" v-model="href_dialog_href">
                </div>
                <div   class="href_dialog_item">
                    <label>链接标题</label>
                    <input type="text" v-model="href_dialog_txt">
                </div>
            </div>
        </wk_dialog>
        <!-- 弹框组件表格导入 -->
        <wk_dialog :ref="alertConfig.table" title="表格编辑" @submit="table_submit" dialog_content="{background:#F9F9F5;width:800px;height:600px;}">
            <div>
                <div class="table_dialog_item">
                    <span style="margin-right:20px;font-weight: bold">单元格数</span>
                    <span>行数</span>
                    <input type="number" v-model="row">
                    <span>列数</span>
                    <input type="number" v-model="col">
                    <div class="algin">
                        <strong>对齐方式</strong>
                        <label style="margin-top:5px">
                            <input type="radio" v-model="algin"  value="right">
                            <svg t="1595320023921" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2892" width="13" height="13"><path d="M960.007451 0H64.00158C28.652059 0 0 28.653866 0 64.003387s28.652059 64.00158 64.00158 64.00158h896.005871c35.338684 0 63.992549-28.652059 63.992549-64.00158C1024 28.653866 995.346134 0 960.007451 0zM960.007451 896.007676H319.998871c-35.338684 0-63.990743 28.652059-63.990743 64.001581 0 35.338684 28.652059 63.990743 63.990743 63.990743h640.00858c35.338684 0 63.992549-28.652059 63.992549-63.990743 0-35.349521-28.653866-64.00158-63.992549-64.001581zM960.007451 296.962348H319.998871c-35.338684 0-63.990743 28.653866-63.990743 64.001581 0 35.349521 28.652059 64.00158 63.990743 64.00158h640.00858c35.338684 0 63.992549-28.652059 63.992549-64.00158 0-35.349521-28.653866-64.00158-63.992549-64.001581zM960.007451 599.045328H64.00158C28.652059 599.045328 0 627.699194 0 663.046909c0 35.338684 28.652059 63.990743 64.00158 63.990743h896.005871c35.338684 0 63.992549-28.652059 63.992549-63.990743 0-35.347715-28.653866-64.00158-63.992549-64.001581z" fill="#231815" p-id="2893"></path></svg>
                        </label>
                        <label>
                            <input type="radio" v-model="algin"  value="center">
                            <svg t="1595320080533" class="icon" viewBox="0 0 1462 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3802" width="20" height="20"><path d="M364.15158697 353.04924526h741.54183589c14.61218387 0 27.05619893 5.2050163 37.45916992 15.5232382 10.33234661 10.41709569 15.50911346 22.84698604 15.50911346 37.48741935 0 14.61924623-5.17676685 27.04913656-15.50911346 37.45210753-10.40297098 10.33940898-22.84698604 15.52323819-37.45916992 15.5232382H364.15158697c-14.61924623 0-27.11976093-5.18382922-37.43092046-15.5232382-10.40297098-10.40297098-15.5656131-22.83992366-15.56561237-37.45210753 0-14.64043332 5.16264212-27.07032366 15.56561237-37.48741935 10.31115879-10.31115879 22.8116735-15.52323819 37.43092046-15.5232382m-105.93656602 211.85194421h953.37259302c14.61924623 0 27.07738602 5.15557975 37.48035699 15.55148836 10.31115879 10.33234661 15.50911346 22.82579894 15.50911346 37.43091973 0 14.62630859-5.19089157 27.10563621-15.50911346 37.43091973-10.40297098 10.41003333-22.86817312 15.58680018-37.48035699 15.58680018H258.21502095c-14.61924623 0-27.07738602-5.17676685-37.49448172-15.57973783C210.42350516 644.98923375 205.21142577 632.50990616 205.21142577 617.89065992s5.21207939-27.10563621 15.50911346-37.43091972c10.41709569-10.41003333 22.88229858-15.55855001 37.49448172-15.55855074m105.93656601 211.89431911h741.54183589c14.61218387 0 27.05619893 5.12026722 37.45916992 15.53736293 10.33234661 10.33234661 15.50911346 22.8116735 15.50911346 37.43092044 0 14.6474957-5.17676685 27.13388565-15.50911346 37.43091972-10.40297098 10.41003333-22.84698604 15.57267547-37.45916992 15.57267547H364.15158697c-14.61924623 0-27.11976093-5.16264212-37.43092046-15.5656131-10.40297098-10.30409643-15.5656131-22.7904864-15.56561237-37.43091972 0-14.62630859 5.16264212-27.10563621 15.56561237-37.43091973 10.31115879-10.42415807 22.8116735-15.53736293 37.43092046-15.53736364M258.21502095 141.21142578h953.37259302c14.61924623 0 27.07738602 5.15557975 37.48035699 15.55148764 10.31115879 10.30409643 15.50911346 22.8116735 15.50911346 37.43092045 0 14.62630859-5.19089157 27.11976093-15.50911346 37.43091973-10.40297098 10.42415807-22.86817312 15.55855001-37.48035699 15.55855001H258.21502095c-14.61924623 0-27.07738602-5.13439194-37.49448172-15.55148764C210.42350516 221.32065718 205.21142577 208.82014247 205.21142577 194.20089625c0-14.63337096 5.21207939-27.13388565 15.50911346-37.43092046C231.13763494 146.35288008 243.60283709 141.21142578 258.21502095 141.21142578" p-id="3803"></path></svg>
                        </label>
                        <label style="margin-top:5px">
                            <input type="radio" v-model="algin"  value="left">
                            <svg t="1595320048724" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3016" width="13" height="13"><path d="M960.007451 0H64.00158C28.652059 0 0 28.653866 0 64.003387s28.652059 64.00158 64.00158 64.00158h896.005871c35.338684 0 63.992549-28.652059 63.992549-64.00158C1024 28.653866 995.346134 0 960.007451 0zM704.001129 896.007676H64.00158C28.652059 896.007676 0 924.659736 0 960.009257c0 35.338684 28.652059 63.990743 64.00158 63.990743h639.999549c35.347715 0 64.00158-28.652059 64.00158-63.990743 0-35.349521-28.653866-64.00158-64.00158-64.001581zM704.001129 296.962348H64.00158C28.652059 296.962348 0 325.614407 0 360.963929c0 35.349521 28.652059 64.00158 64.00158 64.00158h639.999549c35.347715 0 64.00158-28.652059 64.00158-64.00158 0-35.349521-28.653866-64.00158-64.00158-64.001581zM960.007451 599.045328H64.00158C28.652059 599.045328 0 627.699194 0 663.046909c0 35.338684 28.652059 63.990743 64.00158 63.990743h896.005871c35.338684 0 63.992549-28.652059 63.992549-63.990743 0-35.347715-28.653866-64.00158-63.992549-64.001581z" fill="#231815" p-id="3017"></path></svg><path d="M743.765 170.24h-457.344c-18.027 0-32.64 14.613-32.64 32.64v32.64c0 18.112 14.656 32.64 32.64 32.64h457.472c18.027 0 32.64-14.613 32.64-32.64v-32.64c0-17.984-14.72-32.64-32.768-32.64zM825.493 366.336h-620.736c0 0 0 0 0 0-18.027 0-32.64 14.613-32.64 32.64v32.64c0 18.112 14.656 32.64 32.64 32.64h620.736c18.027 0 32.64-14.613 32.64-32.64v-32.64c0.001-0.096 0.002-0.209 0.002-0.322 0-17.85-14.47-32.32-32.32-32.32-0.113 0-0.226 0.001-0.339 0.002zM727.445 562.304h-424.768c-18.027 0-32.64 14.613-32.64 32.64v32.704c0 17.92 14.656 32.64 32.64 32.64h424.768c18.038-0.036 32.659-14.613 32.768-32.63v-32.714c0-17.92-14.72-32.64-32.768-32.64zM858.005 758.4h-686.016c-18.027 0-32.64 14.613-32.64 32.64v32.704c0 17.92 14.656 32.64 32.64 32.64h686.144c18.038-0.036 32.659-14.613 32.768-32.63v-32.714c-0.073-18.042-14.715-32.64-32.768-32.64-0.045 0-0.090 0-0.135 0z" p-id="2039"></path></svg>
                        </label>
                        <label>
                            <input type="radio" v-model="algin" value="default">
                            <svg t="1595319580174"  class="icon"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2038" width="18" height="18"><path d="M743.765 170.24h-457.344c-18.027 0-32.64 14.613-32.64 32.64v32.64c0 18.112 14.656 32.64 32.64 32.64h457.472c18.027 0 32.64-14.613 32.64-32.64v-32.64c0-17.984-14.72-32.64-32.768-32.64zM825.493 366.336h-620.736c0 0 0 0 0 0-18.027 0-32.64 14.613-32.64 32.64v32.64c0 18.112 14.656 32.64 32.64 32.64h620.736c18.027 0 32.64-14.613 32.64-32.64v-32.64c0.001-0.096 0.002-0.209 0.002-0.322 0-17.85-14.47-32.32-32.32-32.32-0.113 0-0.226 0.001-0.339 0.002zM727.445 562.304h-424.768c-18.027 0-32.64 14.613-32.64 32.64v32.704c0 17.92 14.656 32.64 32.64 32.64h424.768c18.038-0.036 32.659-14.613 32.768-32.63v-32.714c0-17.92-14.72-32.64-32.768-32.64zM858.005 758.4h-686.016c-18.027 0-32.64 14.613-32.64 32.64v32.704c0 17.92 14.656 32.64 32.64 32.64h686.144c18.038-0.036 32.659-14.613 32.768-32.63v-32.714c-0.073-18.042-14.715-32.64-32.768-32.64-0.045 0-0.090 0-0.135 0z" p-id="2039"></path></svg>
                        </label>
                    </div>
                    <span @click="setData">生成表格</span>
                </div>
                <div class="table_dialog_table" v-if="table_header.length">
                    <h4>设置单元格名称</h4>
                    <div class="table_header">
                        <div v-for="(item,i) in table_header"  class="td">
                            <input type="text" v-model="table_header[i]" >
                        </div>
                    </div>
                    <div class="max_hight">
                        <h4>设置单元格内容</h4>
                        <div class="table_body_item"  v-for="(item,i) in table_data">
                            <div v-for="(item2,k) in table_data[i]"  class="td">
                                <textarea  v-model="table_data[i][k]" ></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </wk_dialog>

    </div>
</template>

<script>
    import wk_dialog from './dialog';
    import alertConfig from "../config/alert";
    import Codemirror from "codemirror";
    import codemirrorConfig from "../assets/js/codemirror/config";
    import {renderTable, sqlparse} from "../utils";
    const html2md=require('html-to-md')
    export default {
        name: 'markdown_alert',
        components:{
            wk_dialog,
        },
        data() {
            return {
                codeeditor:null, //代码导入编辑器
                code_dialog_content:'',//代码内容
                code_dialog_lang:'other', //默认语言
                //可选择语言
                lang_type: ["actionscript", "bash", "css", "c", "cpp", "csharp", "coffeescript", "d", "dart", "delphi", "erlang", "go", "groovy", "html", "java", "json", "javascript", "lua", "less", "markdown", "objective-c", "php", "perl", "python", "r", "rst", "ruby", "sql", "sass", "shell", "scala", "swift", "vb", "xml", "yaml", "other"],
                href_dialog_href:'http://', //超链接地址
                href_dialog_txt:"", //超链接标题
                row:2, //表格行
                col:3,//表格列
                algin:"default",//表格居中方式
                table_data:[],//
                table_header:[],
                sql:'',
                markdown:"",
                text_pre:"<h1>WIKE 在现有MD编辑器上进行的二次开发</h1>",
                alertConfig
            };
        },
        props:['editor','vm'],
        mounted() {
            this.codeeditor = new Codemirror(this.$refs.codeeditor, {//实例化code弹窗编辑器
                value: '',
                onload: (data) => {
                    const {doc: {height = 0}} = data;
                    this.editorScrollHeight = 0;
                },
                ...codemirrorConfig,
                lineNumbers:false //取消行号
            }); //实例化编辑器

        },
        methods: {
            setValue(key,value){
                this[key]=value
            },
            show(key){
                this.$refs[key].show();
            },
            insertContent(str){
                this.vm.instance.insertContent(str)
            },
            setData(){
                //设置表格数据
                this.table_header.length=this.col
                this.table_data.length=this.row
                for(let j =0;j<this.col;j++){
                    this.table_header[j]=this.table_header[j]||''
                }

                for(let i =0;i<this.row;i++){
                    this.table_data[i]= this.table_data[i]||[];
                    this.table_data[i].length=this.col
                    for(let j =0;j<this.col;j++){

                        this.table_data[i][j]=this.table_data[i][j]||''
                    }
                }

                this.$forceUpdate() //强制更新视图
            },
            table_submit(){ //表格解析
                this.insertContent( renderTable(this.table_header,this.table_data,this.algin));
                this.table_header=[]
                this.table_data=[]
            },
            sql_submit(){ //sql 解析
                let data=sqlparse(this.sql)
                if(data[0]&&data[1].length>0){
                    let table_header=['字段名','类型','NULL','默认值','注释','索引']
                    this.insertContent('\n### 表名:'+data[0]+'\n');
                    this.insertContent( renderTable(table_header,data[1],this.algin));
                    this.sql=''
                }else{
                    alert('sql数据不对')
                }

            },
            href_submit(){
                this.insertContent('\n['+this.href_dialog_txt+']('+this.href_dialog_href+')'); //插入链接
                this.href_dialog_txt=''  //重置数据
                this.href_dialog_href='http://'
            },
            code_submit(){
                let content=this.codeeditor.getValue()
                if(content){
                    let lang=this.code_dialog_lang
                    if(this.code_dialog_lang=='other'){
                        lang=''
                    }
                    this.insertContent('\n```'+lang+'\n' + content + '\n```\n'); //插入代码内容
                    //
                    this.codeeditor.setValue('') //重置数据
                }
            },
            html_submit(){
                this.insertContent('\n'+html2md(this.markdown)+'\n');
                this.markdown=''
            }
        }

    };

</script>

<style scoped  lang="less">
    @import "../assets/font/iconfont.css";
    @import "../assets/css/theme";
    @import "../assets/css/light";
    @import "../assets/css/index";
    .editormd-code-toolbar {
        color: #999;
        font-size: 14px;
        margin: 10px;
        select {
            color: #999;
            padding: 3px 8px;
            border: 1px solid #ddd;
        }
        span{margin-right:10px}
    }
    .code_dialog_content{
        width: 100%;
        height: 450px;
        margin-bottom: 6px;
        overflow: auto;
        border: 1px solid #eee;
        background: #fff;
        padding: 15px;
        resize: none;
    }

    .href_dialog_item,.table_dialog_item{
        overflow: hidden;
        margin:20px;
        label{
            float: left;
            display: block;
            width: 75px;
            text-align: left;
            padding: 7px 0 15px 5px;
            margin: 0 0 2px;
            font-weight: normal;
            vertical-align: middle;
        }
        input{    color: #999;
            padding: 8px;
            border: 1px solid #ddd;
            display: inline-block;
            width: 264px;
        }
    }
    .table_dialog_item{
        input[type=number]{width:60px;text-align: center;margin:0 10px}
        label{float: right;vertical-align: baseline}
        input[type=radio]{width:auto;text-align: center;margin:0px 3px;vertical-align:middle;margin-top:-8px }
        .algin{
            float:left;
            margin-left:20px;
            vertical-align: baseline;
            strong{vertical-align: middle;font-weight: bold;margin-top:10px;display: inline-block;margin-right:10px}
        }
    }
    .table_dialog_table{
        h4{margin:10px;font-weight: bold}
        .table_header{
            width:100%;
            display: flex;
            .td{
                border:1px solid #ccc;
                text-align: left;
                flex:1;
                overflow: auto;
                input{width:100%;}
            }
        }
        .table_body_item{
            margin:5px 0;
            display: flex;
            .td{
                border:1px solid #ccc;
                text-align: left;
                flex:1;
                overflow: auto;
                textarea{width:100%;height: 40px;overflow: auto}
            }
        }

    }
    .common_dialog{
        pre{background:#eee;margin:5px 0px;padding:20px 1in ;border-radius:5px}
        .markdown-content{
            textarea{
                border: 1px solid #ccc;
                padding:10px;
                box-sizing: border-box;
                width:100%;
                height:280px;
            }
        }
        h5{margin:10px 0px;font-weight: bold}
    }
    .max_hight{max-height:350px;overflow: auto}
</style>
